<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="./style/index.css">
  <script src="./utils/crypto-js.min.js"></script>
  <script src="./utils/angular1.3.9.min.js"></script>
  <script src="./utils/angular1.3.9-route.min.js"></script>
  <script src="./utils/moment.min.js"></script>
  <script src="./component/component.js"></script>
  <script src="./app.js"></script>
  <script src="./server/utilServer.js"></script>
  <script src="./server/tableServer.js"></script>
  <script src="./server/MessageService.js"></script>
  <script src="./server/TimeService.js"></script>
  <script src="./server/CryptoService.js"></script>
  <script src="./server/commonServer.js"></script>
  <script src="./controllers/ButtonCtrl.js"></script>
  <script src="./controllers/TimePickerCtrl.js"></script>
  <script src="./controllers/PaginationCtrl.js"></script>
  <script src="./controllers/CollapseCtrl.js"></script>
  <script src="./controllers/UploadCtrl.js"></script>
  <script src="./controllers/SwitchCtrl.js"></script>
  <script src="./controllers/MainCtrl.js"></script>
  <script src="./controllers/DescriptionsCtrl.js"></script>
  <script src="./controllers/FormCtrl.js"></script>
  <script src="./controllers/CascaderCtrl.js"></script>
  <script src="./controllers/ProgressCtrl.js"></script>
  <script src="./controllers/DialogCtrl.js"></script>
  <script src="./controllers/CardCtrl.js"></script>
  <script src="./controllers/CarouselCtrl.js"></script>
  <script src="./controllers/DatePickerCtrl.js"></script>
  <script src="./controllers/TabsCtrl.js"></script>
  <script src="./controllers/PopconfirmCtrl.js"></script>
  <script src="./controllers/TransferCtrl.js"></script>
  <script src="./controllers/RadioCtrl.js"></script>
  <script src="./controllers/DropdownCtrl.js"></script>
  <script src="./controllers/LinkCtrl.js"></script>
  <script src="./controllers/BadgeCtrl.js"></script>
  <script src="./controllers/LayoutCtrl.js"></script>
  <script src="./controllers/InputCtrl.js"></script>
  <script src="./controllers/BreadcrumbCtrl.js"></script>
  <script src="./controllers/SelectCtrl.js"></script>
  <script src="./controllers/CheckBoxGroupCtrl.js"></script>
  <script src="./controllers/HomeCtrl.js"></script>
  <script src="./controllers/MessageCtrl.js"></script>
  <script src="./controllers/TableCtrl.js"></script>
  <script src="./controllers/MenuCtrl.js"></script>
</head>

<body ng-controller="MainCtrl">
  <el-container direction="vertical">
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="300px">
        <div class="menu">
          <el-menu mode="vertical" active-index="activeIndex" on-select="handleSelect(selected)"
            background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <!-- 遍历菜单数据生成菜单项 -->
            <div ng-repeat="menu in menuData">
              <!-- 判断是否为子菜单 -->
              <el-submenu ng-if="menu.children" index="{{menu.index}}" title="{{menu.title}}">
                <div ng-repeat="submenu in menu.children">
                  <el-submenu ng-if="submenu.children" index="{{submenu.index}}" title="{{submenu.title}}">
                    <!-- 递归生成子菜单 -->
                    <el-menu-item ng-repeat="subSubmenu in submenu.children" index="{{subSubmenu.index}}"
                      to="{{subSubmenu.to}}">
                      {{subSubmenu.title}}
                    </el-menu-item>
                  </el-submenu>
                  <!-- 递归生成子菜单 -->
                  <el-menu-item index="{{submenu.index}}" to="{{submenu.to}}" ng-if="!submenu.children">
                    {{submenu.title}}
                  </el-menu-item>
                </div>
              </el-submenu>

              <!-- 普通菜单项 -->
              <el-menu-item ng-if="!menu.children" index="{{menu.index}}" to="{{menu.to}}">
                {{menu.title}}
              </el-menu-item>
            </div>
          </el-menu>
        </div>
      </el-aside>
      <el-main style="flex: 1;">
        <ng-view></ng-view>
      </el-main>
    </el-container>
  </el-container>
</body>

</html>